<template>
  <div class="home">
    <h2>{{nums}}</h2>
    <button @click="add">{{list[0].name}}</button>
    {{type}}
  </div>
</template>


<script>
import {ref,reactive,toRefs,watch,computed} from "vue" 
import {useRoute,useRouter} from "vue-router"
export default {
  setup() {
    const nums=ref(0)
    const data=reactive({
      list:[
        {
        name:"啦啦啦",
        age:18
      },
      {
        name:"哈哈哈",
        age:18
      },
      {
        name:"啦啦啦",
        age:18
      },
      {
        name:"嘻嘻嘻嘻",
        age:20
      }
      ],
      type:true
    })
    console.log(nums.value);
    const router=useRouter()
    const {list,type}=toRefs(data)
    // 跳转
    const add=()=>{
      router.push({path:"/about",query:{id:1}})
    }
    const route=useRoute()
    watch(route,(val)=>{
      console.log("路由跳转",val)
    })
    // 计算属性
   let listnum= computed(()=>{
      return data.list.filter(item=>{
        return item.age==18
      })
    })
    console.log("计算属性",listnum);
    
  // watch(() => router, (val) => {
  //     console.log("路由跳转",val.matched)
    
  // }, {deep: true})

    return{
      nums,
      // toRefs(...data),
      list,
      type,
      add
    }

  },
 
 
}
</script>
